<script setup>
import { reactive, ref, nextTick ,defineComponent,onMounted,onBeforeUnmount,getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { boxType, boxList, faqHomeList, reviewList, giftList,getUserWallet,getBasisSetting,getWebDataStatistics,getLiveUnBoxingList } from '../../http/api'
// import  WebSocket from 'websocket';
import titleTop from '../../components/topTitle/index.vue'
import itemTitle from '../../components/itemTitle/index.vue'
import sortItemList from '../../components/sortItemList/index.vue'

const router = useRouter()
let curentIndex = ref(1)
let socket = null
//引入全局注册的proxy
const { proxy } = getCurrentInstance()
const { $t } = proxy;
let selectTEggList = reactive({ list: [] })
let callUsShow = ref(false)
const isScroll = ref(true)
const baseUrl = ref(import.meta.env.VITE_APP_BASE_URL)
const websocketUrl = ref(import.meta.env.VITE_APP_WEB_SOCKET_URL)
let $backTop = ref(proxy.$backTop)
// 分类列表
let sortList = ref([])
let sortListAll = ref([])
let sortListSmall = ref([])
let sortArr = ref([])
let liveEggList = reactive({
    list:[]
})
let numberExchange = ref(proxy.$numberExchange)
let rightVal = ref(0)
// 用户信息对象
let userInfo = ref(undefined)
// 判断用户是否登录
var userInfos = localStorage.getItem('userInfo')
let bassisSetInfo = reactive({data:{}})
let dataCountInfo =  reactive({data:{}})
// 评价轮播图左右切换按钮是否选中对象
let isLunboBtnChoseeObj = reactive({
    left: false,
    right: false
})
// 评价轮播图dom对象变量
let lunboObj = ref(null)
// 排序下拉框选中的值
let sortOptVal = ref('PRICE_HIGHEST')
//搜索输入框的值
let eggNameSearch = ref('')
// 扭蛋分类数组下标
let sortListIndex = ref(0)
// 扭蛋列表页码
let pageNo = ref(1)
let inputName = ref('')

// 扭蛋列表
let egglist = ref([])
let isLookMore = ref(true)
// 排序下拉框值
let sortOptions = reactive([
    {

        value: 'A_Z'
    },
    {

        value: 'MOST_POPULAR'
    }, {

        value: 'PRICE_HIGHEST'
    },
    {

        value: 'PRICE_LOWEST'
    },
    {

        value: 'Z_A'
    },
])
let problemList = reactive({
    list: []
})
// 头部导航栏高亮下标
let menuTabWordIndex = ref(0)
let reviewsList = reactive({
    list: []
})
const homeBody = ref(null)
const backTopFlag = ref(false);
const scrollTop = ref(0)
// 主题颜色
let isDark = ref(true)
let giftListObj = reactive({ list: [] })


defineComponent({
    components: {
        Vue3SeamlessScroll
    }
})

// 获取实时扭蛋列表接口
const getLiveUnBoxingListFn = async()=>{
   
    let res = await getLiveUnBoxingList()
    if(res.success){
        liveEggList.list = res.result
    }
    console.log(res,'获取实时扭蛋列表接口返回')
}
getLiveUnBoxingListFn()

onMounted(() => {
    let randomNumber = Math.floor(Math.random() * 100) + 1;
    let socketUserId = localStorage.getItem('token') ? (localStorage.getItem('token') + '_web-application') : (randomNumber + '_web-application')
    let socketPath = `${websocketUrl.value}/${socketUserId}`
    socket = new WebSocket(socketPath);
    socket.onopen = () => {
        console.log('WebSocket 连接已建立');
        // 在连接建立后，可以发送消息或执行其他操作
    };
    socket.onmessage = (event)=>{
        if(event.data){
            let data = JSON.parse(event.data).result
            liveEggList.list.push(data)
            console.log('收到消息-------------------------------:',liveEggList.list );
        }
    }

    window.onresize = () => {
        return (() => {
            // 获取屏幕宽度，并计算右侧二维码的右边距
            let windowWidth = document.documentElement.clientWidth
            if(windowWidth > 2560){
                rightVal.value =  (windowWidth - 2560 ) /2 
            }else{
                rightVal.value = 0
            }
            if(windowWidth <= 2560){
                sortArr.value =  sortList.value
                if(windowWidth <= 2133){
                    sortArr.value =  sortListSmall.value
                }
            }
            
        })()
    };
    // locale.value = 'en'
    // locale.value = 'zhCN'
    // console.log( $t("msg.message.upload"),'11111' ); //获取值
})
locale.value = localStorage.getItem('lang') || 'zhCN'

// 组件被销毁之前，清空 sock 对象
onBeforeUnmount(() => {
  if(socket){
    // 关闭连接
    socket.close()
    
    // 销毁 websocket 实例对象
    socket = null
  }
  
})

// 获取用户钱包信息
const getUserWalletFn = async(userInfos)=>{
    let res = await getUserWallet()
    console.log(userInfos,'res进去了4911111111111111')
    if(res?.code && res.code === 200){
        nextTick(()=>{
            if(userInfos){
                userInfo.value = JSON.parse(userInfos)
            }
            userInfo.value.balance = res.result.balance
        })
    }
 
}
if (userInfos) {
    getUserWalletFn(userInfos)
}


// onMounted(()=>{

// })
// 跳转页面
const toPage = (path, id) => {
    router.push({ name: `${path}`, query: { id } })
}

// 鼠标移入精选扭蛋
// const enterEggFunc = (index) => {
//     return
//     curentIndex.value = index
// }
// 获取基础公共配置
const getBasisSettingFn = async()=>{
    let res = await getBasisSetting()
    if(res.success){
        bassisSetInfo.data = res.result
    }
    console.log( bassisSetInfo.data,'获取基础公共配置返回---')
}
getBasisSettingFn()

// 获取数据统计
let getWebDataStatisticsFn = async()=>{
    let res = await getWebDataStatistics()
    if(res.success){
        dataCountInfo.data = res.result
    }
    console.log( dataCountInfo.data,'获取数据统计配置返回---')
}
getWebDataStatisticsFn()

// 鼠标移入评价轮播图左右切换按钮
const interLunboBtn = (flag) => {
    isLunboBtnChoseeObj[flag] = true

}
// 鼠标移出评价轮播图左右切换按钮
const leaveLunboBtn = (flag) => {
    isLunboBtnChoseeObj[flag] = false

}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 获取图片路径资源
const getImageUrlEarn = (name) => {
    return new URL(`../../assets/img/earn/${name}`, import.meta.url).href
}

// 评价轮播图切换
const changeLunbo = (type) => {
    console.log(lunboObj.value, '555')
    lunboObj.value[type]()
    // lunboObj.value
}
// 获取评价轮播图dom元素信息
const lunbo = (el) => {
    lunboObj.value = el
    // console.log(lunboObj, '1111'); // 打印组件实例或DOM元素
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
    console.log(res, 'reszizujian')
}

const getboxType = async () => {
    let res = await boxType()
    res.unshift({ 'name': 'whole', id: '', sortNum: 0 })
    console.log(res, '分类')
    sortListAll.value = res
    sortListSmall.value = res.filter((item,index)=>{
        return index < 5
    })
    sortList.value = res.filter((item,index)=>{
        return index < 6
    })

    sortArr.value = sortList.value
    
    let windowWidth1 = document.documentElement.clientWidth
    if(windowWidth1 <= 1920){
        sortArr.value =  sortListSmall.value
    }
}
getboxType()
// 子组件返回的点击分类事件
const clickSortFunc = async (index) => {
    console.log(sortArr.value,'111')
    sortListIndex.value = index
    isLookMore.value = true
    pageNo.value = 1
    egglist.value = []

    getBoxList(sortArr.value[index].id, pageNo.value, sortOptVal.value, eggNameSearch.value)
}
// 查看更多按钮点击
const viewMoreClick = (val)=>{
    console.log(val,'111')
    if(!val){
        sortArr.value = sortList.value
        let windowWidth1 = document.documentElement.clientWidth
        if(windowWidth1 <= 2133){
            sortArr.value =  sortListSmall.value
        }
    }else{
        sortArr.value = sortListAll.value
    }

    
}
// 获取扭蛋列表接口(用于重磅精选展示)
const getBoxList2 = async(id, pageNo, sortByEnum, name)=>{
    let res = await boxList({
        "boxTypeId": id,
        name,
        pageNo,
        "pageSize": 3,
        sortByEnum
    })
    selectTEggList.list = res.records
}   
getBoxList2('',1,'PRICE_HIGHEST','')


// 获取扭蛋列表接口
const getBoxList = async (id, pageNo, sortByEnum, name) => {
    if (!isLookMore.value) {
        return;
    }
    try {
        const res = await boxList({
            boxTypeId: id,
            name,
            pageNo,
            pageSize: 6,
            sortByEnum
        });
        
        if (res.records.length) {
            egglist.value.push(...res.records);
            
            // 如果没有更多数据需要加载，则设置isLookMore为false
            if (res.records.length < 6) {
                isLookMore.value = false;
            }
        } else {
            isLookMore.value = false;
        }
    } catch (error) {
        console.error('Error fetching box list:', error);
        // 处理异常情况，例如设置isLookMore为false或显示错误提示
        isLookMore.value = false;
    }
};
getBoxList('', pageNo.value, sortOptVal.value, eggNameSearch.value)

// 查看更多按钮点击
const lookMore = () => {
    if(!isLookMore.value){
        return
    }
    pageNo.value += 1
    // isLookMore.value = true
    getBoxList(sortArr.value[sortListIndex.value].id, pageNo.value, sortOptVal.value, eggNameSearch.value) 
   
}

//子组件排序下拉框返回的change事件
const emitSortOptionVal = (val) => {
    console.log(val,'val change')
    sortOptVal.value = val
    isLookMore.value = true
    egglist.value = []
    pageNo.value = 1
    getBoxList(sortArr.value[sortListIndex.value].id, pageNo.value, sortOptVal.value, eggNameSearch.value)
}
// 子组件点击搜索按钮事件
const emitSearchInputVal = (val) => {
    // id, pageNo, sortByEnum, name
    console.log(val, 'valfathy')
    sortListIndex.value = 0
    inputName.value = val
    isLookMore.value = true
    egglist.value.length = 0
    pageNo.value = 1
    getBoxList(sortArr.value[sortListIndex.value].id, pageNo.value, sortOptVal.value,inputName.value)
}
// 子组件返回的导航栏点击事件
const emitMenutabIndex = (index) => {
    menuTabWordIndex.value = index
}
// 退出登录子组件返回
const logoutEmit = () => {
    userInfo.value = ''
}
// 获取问题列表
const getfaqHomeList = async () => {
    let res = await faqHomeList()
    if (res.length) {
        res.forEach(element => {
            element.show = false
        });
        problemList.list = res
    } else {
        problemList.list.length = 0
    }
    console.log(res, 'wenti')

}
getfaqHomeList()
// 展开收起图标点击
const changeShow = (index) => {
    problemList.list[index].show = !problemList.list[index].show
}
// 获取评审列表
const getreviewList = async () => {
    let res = await reviewList()
    console.log(res, 'pinshneg')

    reviewsList.list = res
}
getreviewList()
const scrollToTop = () => {
    scrollTop.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    backTopFlag.value = scrollTop.value > 850;
};
nextTick(()=>{
    window.addEventListener('scroll', scrollToTop);
})
//返回顶部
const backTop = () => {
    nextTick(() => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    })
}
backTop()
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
console.log(isDark.value,'isDark.value')

// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
// 获取礼品列表用于banner泡泡图渲染
const getGift = async () => {
    let res = await giftList({
        name: '',
        pageNo: 1,
        "pageSize": 6,
        sortByEnum: 'A_Z'
    })
    if (res.records.length) {
        giftListObj.list = res.records
    }
    console.log(res, 'res1212121212')

}
getGift()
</script>

<template>
    <div class="homeBody"
        :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }"
        ref="homeBody">
        <headNavigation @logoutEmit="logoutEmit" :isDark="isDark" @changeIsDarkEmit="changeIsDarkEmit"
            @emitMenutabIndex="emitMenutabIndex" :menuTabWordIndex="menuTabWordIndex" :userInfo="userInfo"
            @loginEmit="loginEmit"></headNavigation>
        <div class="contactUsBig" v-if="bassisSetInfo.data.contactUsQrCode">
            <div class="greenBox" :style="{right: rightVal+'px'}"></div>
            <div class="contactUs"  :style="{right: rightVal+'px'}" @click="callUsShow = true">

                <img :src="baseUrl+'/sys/common/static/'+ bassisSetInfo.data.contactUsQrCode" alt="">
                <div>{{$t('msg.message.callUs')}}</div>
            </div>
            <div class="contactUsTop" :style="{right: rightVal+48+'px'}" @click="backTop" v-show="backTopFlag">
                <img src="../../assets/img/home/goTop.png" alt="">
                <div>TOP</div>
            </div>
        </div>


        <div class="bannerBox"  v-if="giftListObj.list.length">
            <div class="bannerBoxBanner">
                <div class="bannerBody">
                    <div class="bannerBody_left">
                        <div class="bannerBody_img">
                            <img :src="isDark ? getImageUrl('nighttitle.png') : getImageUrl('baitiantitle.png')" alt="">
                            <div :style="{color:isDark ? '#fff' : '#000'}">超过 10000000 名会员信赖</div>
                        </div>
                        <div class="lijiqianwan" @click="toPage('prize')">{{$t("msg.message.GoImmediately")}}</div>
                    </div>
                    <div class="bannerBody_right">
                        <img src="../../assets/img/home/chahua.png" class="chahua" alt="">
                        <div class="bannerRoundArea">
                            <div class="bannerRoundBox bannerRoundBoxAni1">
                                <img src="../../assets/img/home/round.png" class="bannerRound" style="height: 119%;left: 0;" alt="">
                                <img class="bannerRound bannerRound1" :src="baseUrl + '/' + giftListObj.list[0].img" style="left: 71px;" alt="">
                            </div>
                            <div class="bannerRoundBox bannerRoundBoxAni2">
                                <img src="../../assets/img/home/round.png" class="bannerRound" style="height: 119%;left: 0;" alt="">
                                <img class="bannerRound bannerRound2" :src="baseUrl + '/' + giftListObj.list[1].img" style="left: 50px;" alt="">
                            </div>
                            <div class="bannerRoundBox bannerRoundBoxAni3">
                                <img src="../../assets/img/home/round.png" class="bannerRound" style="height: 119%;left: 0;" alt="">
                                <img class="bannerRound bannerRound3" :src="baseUrl + '/' + giftListObj.list[2].img" style="left: 46px;" alt="">
                            </div>
                            <div class="bannerRoundBox bannerRoundBoxAni4">
                                <img src="../../assets/img/home/round.png" class="bannerRound" style="height: 119%;left: 0;" alt="">
                                <img class="bannerRound bannerRound4" :src="baseUrl + '/' + giftListObj.list[3].img" style="left: 51px;" alt="">
                            </div>
                            <div class="bannerRoundBox bannerRoundBoxAni5">
                                <img src="../../assets/img/home/round.png" class="bannerRound" style="height: 119%;left: 0;" alt="">
                                <img class="bannerRound bannerRound5" :src="baseUrl + '/' + giftListObj.list[4].img" style="left: 51px;" alt="">
                            </div>
                            <div class="bannerRoundBox bannerRoundBoxAni6">
                                <img src="../../assets/img/home/round.png" class="bannerRound" style="height: 119%;left: 0;" alt="">
                                <img class="bannerRound bannerRound6" :src="baseUrl + '/' + giftListObj.list[5].img"  style="left: 51px;" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                
                <img class="jiange" :src="isDark ? getImageUrl('jiange.png') : getImageUrl('jiangebaitian.png')" alt="">
            </div>

        </div>
        <div class="nowEgg">
            <div class="nowEggPng">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }"> {{locale === 'zhCN' ? '实时扭蛋' : 'Real time egg twisting'}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                    </div>
                </div>
                <img :src="getImageUrl('title.png')" alt="">
               

            </div>
            <vue3-seamless-scroll  class="nowEggList" v-model="isScroll" direction="left" hover  singleLine :list="liveEggList.list">
                <div class="nowEggItem"  @click="toPage('raffle', item.boxId)" v-for="(item, index) in liveEggList.list" :key="index">
                    <div class="nowEggProImg">
                        <img :src="baseUrl+'/'+item.boxImg" alt="">
                    </div>
                    <div class="nowEggInfo">
                        <div class="nowEggUserName">
                            <img :src="baseUrl+'/'+item.userAvatar" alt="">
                            <!-- <div>玩家姓名</div> -->
                        </div>
                        <div class="nowEggMoney">
                            <img src="../../assets/img/header/money.png" alt="">
                            <div>{{numberExchange(item.giftVal)}}</div>
                        </div>
                    </div>
                </div>
            </vue3-seamless-scroll>
            <!-- <div class="nowEggList">
               

            </div> -->
        </div>
        <!-- <div style="color: #fff;">{{ $t("message.upload") }}</div> -->
        <titleTop :title="locale === 'en' ? 'Heavyweight Selection' : '重磅精选'" botText="KEY PRODUCTS" :isEn="locale" :isShowRight="false" :isDark="isDark"></titleTop>
        <div class="selectTEgg">
            <div :class="curentIndex === index ? 'selectTEggList bot55' : 'selectTEggList'"
                :style="{ position: curentIndex === index ? 'relative' : 'unset'}"
                v-for="(item, index) in selectTEggList.list" :key="index" @click="toPage('raffle', item.id)">
                <div class="selectTEggItem">
                    <div class="selectTEggItemImg">
                        <img :src="baseUrl+'/'+item.img"
                            alt="">
                    </div>
                    <div class="selectTEggItemNameBox">
                        <div class="selectTEggItemName">{{ item.name || '' }}</div>
                        <div class="selectTEggItemPrice">
                            <img src="../../assets/img/header/money.png" alt="">
                            <div>{{ numberExchange(item.price) || numberExchange(item.val) || '' }}</div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="nowGoTo">
            <img src="../../assets/img/home/bottomColor.png" alt="">    
        </div>
        <itemTitle :titleWidth="locale == 'en' ? 659 : ''" :sortOptions="sortOptions" bot-text="Capsule Toys" :isPrize="true" @emitSortOptionVal="emitSortOptionVal"
             :isDark="isDark" :title="locale === 'en' ? 'Mysterious Twisted Egg' :'神秘扭蛋'"
            @emitSearchInputVal="emitSearchInputVal" :isEn="locale" :placeholder="locale === 'en' ? 'Search for what you want...' : '搜索你想要的...'"></itemTitle>
        <sortItemList :sortList="sortArr" :sortIndex="sortListIndex" @viewMoreClick="viewMoreClick" @clickSortFunc="clickSortFunc"></sortItemList>
        <!-- <div class="sortBox">
            <div v-for="(item, index) in sortList" :key="index" :class="sortIndex === index ? 'sortAll' : 'sortItem'"
                @click="clickSortFunc(index)">
                {{ item.name }}
                <img style="margin-left: 9px;width: 14.69px;" v-if="index === (sortList.length - 1)"
                    src="../../assets/img/home/jiantou.png" alt="">
            </div>
        </div> -->
        <!-- <eggSortList :egglist="egglist"></eggSortList> -->
        <div class="eggSortInfo">
            <div class="eggSortInfoitem" v-for="(item, index) in egglist"
                :key="index">
                <div class="eggSortInfoitemImg">
                    <!-- <img :src="index === 0 ? getImageUrl('egg1.png') : index === 1 ? getImageUrl('egg2.png') : index === 2 ? getImageUrl('egg3.png') : getImageUrl('egg3.png')"
                        alt=""> -->
                    <el-image   :src="baseUrl+'/'+item.img" fit="contain" />
                    <!-- <img :src="baseUrl+'/'+item.img"
                    alt=""> -->
                </div>
                <div class="eggSortInfoitemMsg">
                    <div class="eggSortInfoitemMsgL">
                        <div class="eggSortInfoitemMsgLBig">
                            <div class="eggSortInfoitemMsgLText">
                                {{ item.name || '' }}
                            </div>
                            <div class="eggSortInfoitemMsgLBottom">
                                <img src="../../assets/img/header/money.png" alt="">
                                <div>{{ numberExchange(item.price) || numberExchange(item.val) || ''  }}</div>
                            </div>
                        </div>
                        <div class="lookDetail" @click="toPage('raffle', item.id)">
                            <img src="../../assets/img/home/yellowbtn.png" alt="">
                            <div>{{$t("msg.message.GoImmediately")}}</div>
                        </div>
                    </div>
                    <!-- <div class="findMoreBtn" >发现更多</div> -->
                </div>
            </div>
        </div>
        <div class="loadMore">
            <div :class="locale != 'en' ? 'findMoreBtn' : 'findMoreBtn w216'"
                :style="{ color: isDark ? '#fff' : '#000', background: isDark ? 'unset' : '#fff' }"  @click="lookMore">{{isLookMore ?  $t("msg.message.viewMore") : $t("msg.message.nothing")}}</div>
        </div>
        <titleTop :title="locale === 'en' ? 'Player reviews': '玩家评价'" botText="Player reviews" :isDark="isDark" :isEn="locale" jumpPath="review"></titleTop>
        <div class="evaluateBox">
            <!-- <div class="evaluateInfoBox">
                <div class="lunbo">
                    <img src="../../assets/vue.svg" alt="">
                    <div></div>
                    <img src="../../assets/vue.svg" alt="">
                </div>
                <div class="evalDetailBox">
                    <div class="evalDetailTop"> 
                        <div class="evalDetailTopLike">
                            <el-rate v-model="value1" disabled size="large"/>
                        </div>
                        <div class="evalDetailTopText">
                            <div class="evalDetailTopTitle">标题文字</div>
                            <div class="evalDetailText">这里是评价详情具体的文字内容。这里是评价详情具体的文字内容！</div>

                        </div>
                    </div>
                    <div class="evalDetailBottom">
                        玩家名称
                    </div>
                </div>
            </div> -->
            <el-carousel :interval="4000" :ref="lunbo"  indicator-position="none" type="card" >
                <el-carousel-item v-for="item in reviewsList.list" :key="item.id">
                    <div class="carouselBox" :style="{height:item.reviewsType === 'IMG' || item.reviewsType === 'VIDEO' ? '502px' : '200px',background:item.reviewsType === 'IMG' || item.reviewsType === 'VIDEO' ? '#282B29' : 'unset',boxShadow:item.reviewsType === 'IMG' || item.reviewsType === 'VIDEO' ? '#0px 7px 25px 0px #00000091' : 'unset'}">
                        <div class="carouselImgBox" :style="{height:item.reviewsType === 'IMG' || item.reviewsType === 'VIDEO' ? '351px' : '168px'}">
                            <img v-if="item.reviewsType === 'IMG'"
                                :src="baseUrl + '/sys/common/static/' + item.reviewsImg" alt="">
                            <video v-else-if="item.reviewsType === 'VIDEO'" controls :src="baseUrl + '/sys/common/static/' + item.reviewsVideo"></video>
                            <div v-else style="height: 100px;"></div>
                        </div>
                        <div class="carouselBoxBot" :style="{background:item.reviewsType == 'TEXT' ? '#282B29' : 'unset'}">
                            <div class="carouselBoxHeaderBig">
                                <div class="carouselBoxHeader">
                                    <!-- <img src="../../assets/img/personCenter/logo.png" alt=""> -->
                                    <div>{{ item.userName }}</div>
                                </div>
                                <div class="evalDetailTopLike">
                                    <el-rate v-model="item.reviewsRate" :colors="['#f1f1f1', '#EA5151', '#EA5151']"
                                        disabled size="small" />
                                </div>
                            </div>
                            <div class="carouselBoxHeaderText" v-if="item.reviewsType === 'IMG' || item.reviewsType === 'VIDEO'">
                                {{ item.giftName }}
                            </div>
                            <div class="carouselBoxHeaderText" v-else v-html="item.reviewsText">
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
            <div class="lunboBtn">
                <div class="lunboBtnBox" v-show="isDark">
                    <div class="lunboBtnL" @click="changeLunbo('prev')" @mouseenter="interLunboBtn('left')"
                        @mouseleave="leaveLunboBtn('left')"
                        :style="{ background: isLunboBtnChoseeObj.left ? '#27D698' : 'unset' }">
                        <img :src="isLunboBtnChoseeObj.left ? getImageUrl('leftjiantouAc.png') : getImageUrl('leftjiantou.png')"
                            alt="">
                    </div>
                    <div class="lunboBtnR" @click="changeLunbo('next')" @mouseenter="interLunboBtn('right')"
                        @mouseleave="leaveLunboBtn('right')"
                        :style="{ background: isLunboBtnChoseeObj.right ? '#27D698' : 'unset' }">
                        <img :src="isLunboBtnChoseeObj.right ? getImageUrl('rightjiantouAc.png') : getImageUrl('rightjiantou.png')"
                            alt="">
                    </div>
                </div>
                <div class="lunboBtnBox" v-show="!isDark">
                    <div class="lunboBtnL" @click="changeLunbo('prev')" @mouseenter="interLunboBtn('left')"
                        @mouseleave="leaveLunboBtn('left')"
                        :style="{ background: isLunboBtnChoseeObj.left ? '#27D698' : '#fff' }">
                        <img :src="isLunboBtnChoseeObj.left ? getImageUrl('leftjiantou.png') : getImageUrl('leftjiantouAc.png')"
                            alt="">
                    </div>
                    <div class="lunboBtnR" @click="changeLunbo('next')" @mouseenter="interLunboBtn('right')"
                        @mouseleave="leaveLunboBtn('right')"
                        :style="{ background: isLunboBtnChoseeObj.right ? '#27D698' : '#fff' }">
                        <img :src="isLunboBtnChoseeObj.right ? getImageUrl('rightjiantou.png') : getImageUrl('rightjiantouAc.png')"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
        <titleTop  :title="locale === 'en' ? 'common problem' : '常见问题'" :fontFlag="true" bot-text="normal question" :isEn="locale" :isDark="isDark" jumpPath="commonProblem"></titleTop>
        <div class="qustionBox">
            <div class="qustionList" v-for="(item, index) in problemList.list" :key="item.id">
                <div :class="item.show ? 'questionItem borderbot1' : 'questionItem'">
                    <div>{{ item.problem }}</div>
                    <img :src="item.show ? getImageUrl('changeSmall.png') : getImageUrl('changeBig.png')"
                        @click="changeShow(index)" alt="">
                </div>
                <div :class="item.show ? 'questionDetail border1': 'questionDetail'" v-show="item.show">
                    {{ item.answer }}
                </div>
            </div>
        </div>
        <div class="whyBox">
            <div class="nowEggPng">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }"> {{$t('msg.message.whychose')}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                    </div>
                </div>
                <img :src="getImageUrl('title.png')" alt="">
            </div>
        </div>

        <div class="advantageBox">
            <div class="advantageItem">
                <div class="advantageItemImg">
                    <img src="../../assets/img/home/whyicon2.png" alt="">
                </div>
                <div class="advantageItemR">
                    <div class="advantageItemRText">
                        {{$t('msg.message.transparent')}}
                    </div>
                    <div class="advantageItemRDetail">
                        {{$t('msg.message.transparentContent')}}
                    </div>
                </div>
            </div>
            <div class="advantageItem">
                <div class="advantageItemImg">
                    <img src="../../assets/img/home/whyicon1.png" alt="">
                </div>
                <div class="advantageItemR">
                    <div class="advantageItemRText">
                        {{$t('msg.message.Globaltransportation')}}
                    </div>
                    <div class="advantageItemRDetail">
                        {{$t('msg.message.transparentContent')}}
                    </div>
                </div>
            </div>
            <div class="advantageItem">
                <div class="advantageItemImg">
                    <img src="../../assets/img/home/whyicon3.png" alt="">
                </div>
                <div class="advantageItemR">
                    <div class="advantageItemRText">
                        {{$t('msg.message.safe')}}
                    </div>
                    <div class="advantageItemRDetail">
                        {{$t('msg.message.transparentContent')}}
                    </div>
                </div>
            </div>
        </div>
        <div class="openEggInfoBox"
            :style="{ background: isDark ? `url(${getImageUrl('diwen.png')})` : `url(${getImageUrl('diwen2.png')})`, color: isDark ? '#fff' : '#000' }">
            <div class="openEggInfo">
                <div class="openEggInfoImg">
                    <img :src="isDark ? getImageUrl('Frame1.png') : getImageUrl('Frame11.png')" alt="">
                </div>
                <div class="openEggInfoR">
                    <div class="openEggInfoRNum">{{numberExchange(dataCountInfo.data.webUserTotalNum) }}</div>
                    <div class="openEggInfoRText">{{$t('msg.message.registerUsers')}}</div>
                </div>
            </div>
            <div class="openEggInfo">
                <div class="openEggInfoImg">
                    <img :src="isDark ? getImageUrl('Frame2.png') : getImageUrl('Frame22.png')" alt="">
                </div>
                <div class="openEggInfoR">
                    <div class="openEggInfoRNum">{{numberExchange(dataCountInfo.data.openBoxTotalNum) }}</div>
                    <div class="openEggInfoRText">{{$t('msg.message.Openedegg')}}</div>
                </div>
            </div>
            <div class="openEggInfo">
                <div class="openEggInfoImg">
                    <img :src="isDark ? getImageUrl('Frame3.png') : getImageUrl('Frame33.png')" alt="">
                </div>
                <div class="openEggInfoR">
                    <div class="openEggInfoRNum">{{numberExchange(dataCountInfo.data.giftTotalReward) }}</div>
                    <div class="openEggInfoRText">{{$t('msg.message.reward')}}</div>
                </div>
            </div>
        </div>
        <div class="bottomBox padbot20px" :style="{background: isDark ? '#000' : '#fff',color: isDark ? '#fff' : '#000 !important'}">
            <div class="bottomMainBox">
                <div class="bottomMainBoxR" v-if="bassisSetInfo.data.webLogoUrl">
                    <div class="logoBox">
                        <img :src="baseUrl+'/sys/common/static/'+ bassisSetInfo.data.webLogoUrl" alt="">
                    </div>
                    <div class="callUsBig">
                        <div class="callUs">{{$t('msg.message.callUs')}}</div>
                        <div class="erweiCode">
                            <img :src="baseUrl+'/sys/common/static/'+ bassisSetInfo.data.contactUsQrCode" alt="">
                        </div>
                    </div>
                    <div class="massegBox">{{$t('msg.message.busConInfo')}}：{{bassisSetInfo.data.contactUsEmail}}</div>
                </div>
                <div class="bottomMainBoxL">
                    <div class="bottomMainBoxLs">
                        <div class="bottomMainBoxLItem">
                            <div @click="toPage('home')">{{$t('msg.message.home')}}</div>
                            <div @click="toPage('policy')">{{$t('msg.message.ourPolicy')}}</div>
                            <div>{{$t('msg.message.Blog')}}</div>
                        </div>
                        <div class="bottomMainBoxLItem">
                            <div @click="toPage('fairness')">{{$t('msg.message.profair')}}</div>
                            <div @click="toPage('review')">{{$t('msg.message.Playerreviews')}}</div>
                            <div @click="toPage('workPrin')">{{$t('msg.message.howRun')}}</div>
                        </div>
                        <div class="bottomMainBoxLItem">
                            <div @click="toPage('commonProblem')">{{$t('msg.message.commonPro')}}</div>
                            <div>{{$t('msg.message.rule')}}</div>
                        </div>
                        <div class="bottomMainBoxLItem">
                            <div>{{$t('msg.message.fair')}}</div>
                            <div @click="toPage('term')">{{$t('msg.message.temAndcon')}}</div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: flex-end;">
                        <div class="botText">{{$t('msg.message.frintTips')}}</div>

                    </div>

                </div>

            </div>

        </div>

    </div>
    <!-- 修改弹窗 -->
    <div class="mask" style="z-index: 200;" v-if="callUsShow && bassisSetInfo.data.contactUsEmail">
        <div class="dialog">
            <div class="RechargeDialog h300"
                style="   background: #3C3C3C;display: flex;flex-direction: column;align-items: center;">
                <div
                    style="display: flex;align-items: center;justify-content: space-around;position: relative;width: 100%;">
                    <div class="RechargeWord">{{$t('msg.message.callUs')}}</div>

                    <img src="../../assets/img/policy/close.png" class="deleteImg" @click="callUsShow = false" alt="">

                </div>
                <div class="countInput pwdInput">
                    <div style="padding-bottom: 4px;">{{$t('msg.message.callTitle')}}</div>
                    <div>{{$t('msg.message.callContent')}} {{bassisSetInfo.data.contactUsEmail}} {{$t('msg.message.findUs')}}</div>
                </div>
 
            </div>

        </div>

    </div>

</template>

<style scoped>
@import url('./index.css');
</style>
